<template>
    <div class="recipe clear-both" :key="activeDate">
        <div>
            <div>
                <page-title>处方单</page-title>
            </div>  
            <div class="content" >
                <div class="content-btn clear-both">
                    <el-button plain icon="el-icon-arrow-left" @click="back">返回</el-button>
                    <div class="float-right">
                        <span v-show="limitedShow.indexOf('3.1')!=-1" style="margin-right:10px;" >
                            <el-button type="primary" @click="pass"  v-show="dataList.status==0">审核通过</el-button>
                            <el-button type="primary" @click="reject"  v-show="dataList.status==0">审核驳回</el-button>
                        </span> 
                        <el-button v-show="limitedShow.indexOf('3.2')!=-1" type="primary" @click="print">打印处方单</el-button>
                    </div> 
                </div>
                <div  ref="recipe" class="content-recipe">
                    <div class="title-bg">
                        <div class="contint-logo text-center">
                            <img class="logo-img" src="./../../../../static/img/logo.png"/>
                        </div> 
                    </div> 
                    <div class="text-center" style="margin:10px 0;"> 
                        <p sytle="color:#ddd;margin:10px 0;">{{dataList.create_time | DateTime}}</p>
                        <b v-show="doctorList.name">{{doctorList.name}}为您推荐</b>
                    </div>
                    <div class="main-box">
                        <div class="clear-both" style="margin:10px 0;"> 
                            <p class="float-left"><b>患者姓名：</b>{{sickUser.user_name}}</p>
                            <p class="float-right"><b>患者年龄：</b>{{subscribes.age}}</p>
                        </div>
                        <div class="diagnose">
                            <b>[&nbsp;主诉及诊断&nbsp;]：</b>{{subscribes.description}}
                        </div>
                        <div class="medicine">
                            <div class="head-title text-center">
                                <p class="name">药方</p>
                                <p class="info">以下为药方详情</p>
                            </div>
                            <ul class="medicine-ul clear-both">
                                <li class="medicine-li float-left text-center" v-for="(item,index) in drug_info">
                                    <img :src="item.image?imgUrl+item.image:''"/>
                                    <p class="name">{{item.name}}{{item.count}}{{item.company}}</p>
                                </li> 
                            </ul>
                        </div>
                        <div class="diagnose">
                            <b>[&nbsp;注意事项&nbsp;]：</b>{{dataList.remark}}
                        </div>   
                        <div class="diagnose " >
                            <b>[&nbsp;收货地址&nbsp;]：</b>
                            <div class="site-box" v-if="address">
                                <p class="clear-both">
                                    <span>姓名：{{address.name}}</span>
                                    <span class="float-right">电话：{{address.phone}}</span>
                                </p>
                                <p > {{address.address}}{{address.address_detail}}</p>
                            </div>
                            <div class="site-box" v-else> 无 </div>
                        </div>   
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
import * as api from './../../../api/api'
import {IMG_ROOT} from './../../../config'
export default {
    data() {
        return{
            imgUrl:IMG_ROOT,
            activeDate: '0',
            dataList: {},
            sickUser:{}, //病人
            doctorList:{}, //医生
            address:{},//地址
            subscribes:{}, //病情
            drug_info:[], //药方
            limitedShow:sessionStorage.getItem('models').split(','),
        }
    },

    //计算属性
    computed: {

    },

    //钩子函数（页面挂载完成时触发）
    mounted() { 

    },

    //自定义方法
    methods: {
        back() {
            this.$router.back(1);
        }, 
        //打印
        print() {
            let printStr = this.$refs.recipe.innerHTML;
            let cssStr = 
            `html,body,#app{
                height: auto;
                width:96%; 
                margin:auto;
                min-width: 50% !important;
                font-size:18px;
            }
            .contint-logo .logo-img{
                width:60px;
                height:60px; 
                -moz-box-shadow:1px 2px 10px #ddd;
                -webkit-box-shadow:1px 2px 10px #ddd;
                box-shadow:1px 2px 10px #ddd;
                border-radius:10px;
            }
            .content-recipe{
                width:100%;
                height:100%; 
                padding: 20px;
                box-sizing:border-box;
                position: relative;  
            } 
            .content-recipe .title-bg{
                height:150px;
                width:50%;
                margin:0 auto 40px; 
                background:url('./../../../../static/img/cf_bg.png') no-repeat;background-size:100% 100%;
                position:relative;
            }
            .content-recipe .contint-logo{
                position:absolute;
                bottom:-35px;
                left:50%;
                margin-left:-40px;
                padding:10px; 
                box-sizing:border-box;
                
            } 
            .content-recipe .main-box{
                width:50%;
                padding:20px;
                box-sizing:border-box;
                margin:auto;
                border-top:1px dotted  #E6E6E6; 
            }
             .main-box .diagnose{
                margin-bottom:50px;
                font-size:16px;
                
            }
             .main-box .diagnose .site-box{
                padding-left:80px; 
                box-sizing:border-box;
            }
            .main-box .diagnose p{
                padding:5px;
                box-sizing:border-box;
                margin:5px 0;
            }
            .medicine{
                padding:20px;
                box-sizing:border-box;
                border-bottom:1px dotted  #E6E6E6;
                margin-bottom:50px;
            }
            .medicine .head-title{
                margin-top:10px;
                margin-bottom:10px;  
            }
            .medicine .head-title .name{
                color:#333;
                font-size:20px;
                font-weight:bold;
            }
            .medicine .head-title .info{
                color:#999; 
                font-size:15px;
                margin-top:5px;
            }
            .medicine-ul{
                width:100%; 
            }
            .medicine-ul .medicine-li{
                width:25%;
                margin-bottom:15px; 
            }
            .medicine-ul .medicine-li img{
                width:50px;
                height:50px;
                border-radius:50%;
            }
            .medicine-ul .medicine-li .name{
                color:#333;
                margin-top:4px;
                font-size:16px;
            }
            `;
            let node = document.createElement("Style");
            let textNode = document.createTextNode(cssStr); 
            node.appendChild(textNode);
            document.getElementById('app').innerHTML = printStr;
            document.head.appendChild(node);
            window.print();
            window.location.reload();
        },

        //审核通过
        pass() {
            let id = this.dataList.id;
            // let uid = this.dataList.uid;
            let body = {
                model: "Orders",
                data: {
                    status: '1'
                },
                update_condition: {
                    id
                }
            };
            this.$confirm('你确定要通过该订单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.createData(body).then(res => {
                    if(res.data.code === 200) {
                        this.$message({
                            message: '恭喜你，操作成功',
                            type: 'success'
                        });
                        this.dataList.status = '1'
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },

        //审核驳回
        reject() {
            let id = this.dataList.id;
            let body = {
                model: "Orders",
                data: {
                    status: '98'
                },
                update_condition: {
                    id
                }
            };
            this.$confirm('你确定要驳回该订单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.createData(body).then(res => {
                    if(res.data.code === 200) {
                        this.$message({
                            message: '恭喜你，操作成功',
                            type: 'success'
                        });
                        this.dataList.status = '98'
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
            
        }
    },
    beforeRouteEnter:function(to,from,next) {    //路由生命周期
        next(vm => {  
            if(vm.$route.query.recRow){
                vm.dataList = JSON.parse(vm.$route.query.recRow);
                if(vm.dataList.doctor){
                    vm.doctorList =JSON.parse(vm.$route.query.recRow).doctor;
                }
                if(vm.dataList.user){
                    vm.sickUser =JSON.parse(vm.$route.query.recRow).user;
                }
                if(vm.dataList.address){
                    vm.address =JSON.parse(vm.$route.query.recRow).address;
                }
                 if(vm.dataList.subscribes){
                    vm.subscribes =JSON.parse(vm.$route.query.recRow).subscribes;
                }
                if(vm.dataList.drug_info){ 
                    let objDrug=JSON.parse(JSON.parse(vm.$route.query.recRow).drug_info); 
                    Object.keys(objDrug).forEach(function(key){  
                        vm.drug_info.push(objDrug[key]); 
                    });
                } 
            }else{
                vm.$router.go(-1);
            } 
        })
    },
}
</script>

<style scope lang="scss">
.recipe{
    width:100%;
    height:100%;
    background:#fff;
    overflow: auto;
    .content{
        width:100%;
        height:100%; 
        padding: 20px;
        position: relative; 
        .content-btn{
            margin-top:10px;
            padding:0 20px;
        }
        .title-bg{
            height:150px;
            width:50%;
            margin:0 auto 40px; 
            background:url('./../../../../static/img/cf_bg.png') no-repeat;background-size:100% 100%;
            position:relative;
        }
        .contint-logo{
            position:absolute;
            bottom:-35px;
            left:50%;
            margin-left:-40px;
            padding:10px; 
            img{
                width:60px;
                height:60px; 
                -moz-box-shadow:1px 2px 10px #ddd;
                -webkit-box-shadow:1px 2px 10px #ddd;
                box-shadow:1px 2px 10px #ddd;
                border-radius:10px;
            }
        }
        .main-box{
            width:50%;
            padding:20px;
            margin:auto;
            border-top:1px dotted  #E6E6E6; 
            .diagnose{
                margin-bottom:15px;
                font-size:13px;
                .site-box{
                    padding-left:80px;
                    p{
                        padding:5px;
                        margin:5px 0;
                    }
                }
            }
            .medicine{
                padding:10px;
                border-bottom:1px dotted  #E6E6E6;
                margin-bottom:20px;
                .head-title{
                    margin-top:10px;
                    margin-bottom:10px;
                    .name{
                        color:#333;
                        font-size:18px;
                        font-weight:bold;
                    }
                    .info{
                        color:#999; 
                        font-size:12px;
                        margin-top:5px;
                    }
                }
                .medicine-ul{
                    width:100%;
                    .medicine-li{
                        width:25%;
                        margin-bottom:15px;
                        img{
                            width:40px;
                            height:40px;
                            border-radius:50%;
                        }
                        .name{
                            color:#333;
                            margin-top:4px;
                            font-size:13px;
                        }
                    }
                }
            }
        }
    }
}


</style>
